<template>
    <div class="bottom">
        <p>总购买数量: {{ totalNum }}</p>
        <p>
            <button class="pay">去结算</button>
            <button class="clear" @click="clearCart">清空购物车</button>
            <button class="clear_select" @click="delAllSelect">
                删除所有已选中
            </button>
            <button class="list">返回列表页</button>
        </p>
        <p>
            总价格 : ￥ <span>{{ totalPrice }}</span>
        </p>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
    name: "CartFooter",
    methods: {
        ...mapMutations(["clearCart", "delAllSelect"]),
    },
    computed: {
        ...mapGetters(["totalNum", "totalPrice"]),
        ...mapState(["list"]),
    },
};
</script>

<style>
.bottom {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: pink;
}
.bottom > p {
    font-size: 20px;
}

.bottom > p > button {
    font-size: 20px;
    padding: 3px 10px;
    cursor: pointer;
    color: #fff;
}

.bottom > p > button.pay {
    background-color: green;
}

.bottom > p > button.clear {
    background-color: red;
}

.bottom > p > button.clear_select {
    background-color: orange;
}

.bottom > p > button.list {
    background-color: skyblue;
}

.bottom > p > span {
    color: red;
}
</style>
